<template>
  <div id="login-container">
    <div class="login-content">
      <!-- 登录图片 -->
      <!-- <el-image src="/imges/login-img.svg" fit="fill" /> -->
      <div class="login-form">
        <!-- 登录标题 -->
        <el-text>{{ $t('login.title') }}</el-text>
        <!-- 登录表单 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
          <el-col :span="24">
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" size="large" show-password autocomplete="on" :placeholder="$t('common.enter') + $t('login.password')" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-button :loading="loginForm.loading" type="success" @click.prevent="loginOn">
              {{ $t('login.loginOn') }}
            </el-button>
          </el-col>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted, toRefs } from 'vue'
import type { object_Inf } from '@/utils/typings/index.type'
import { useI18n } from 'vue-i18n'
import router from '@/router'
import Dile_StoreAction from '@/utils/cache/store'
import Dile_Methods from '@/utils/methods'

let I18n = useI18n()
let { t } = I18n
/**
 * @Author: xzh
 * @Descripttion:路由参数
 * @Param:
 */
let routerParam = reactive<object_Inf>({
  router, //路由实例
  redirect: '', //重定向地址
  otherQuery: '' //地址参数
})
/**
 * @Author: xzh
 * @Descripttion: 表单参数
 * @Param:
 */
let loginForm = reactive<object_Inf>({
  loading: false,
  account: 'admin',
  password: 'admin',
  verifiCode: '',
  //生成验证码
  generateCode: Dile_Methods.generateRandomStr()
})
/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let loginFormRef = ref<any>(null)
/**
 * @Author: xzh
 * @Descripttion:登录验证规则
 * @Param:
 * @param {*} computed
 */
let loginRules = computed((): any => {
  return reactive({
    password: [
      {
        required: true,
        message: t('common.enter') + t('login.password'),
        trigger: 'change'
      }
    ]
  })
})
//获取语种数组
let languageArr = reactive<Array<string>>(I18n.availableLocales)
/**
 * @Author: xzh
 * @Descripttion:初始化
 * @Param:
 */
onMounted(() => {
  //@ts-ignore--渲染登录背景
  VANTA.NET({
    el: '#login-container',
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    color: '#327a47'
  })
})
/**
 * @Author: xzh
 * @Descripttion: 获取当前语言
 * @Param:
 * @param {*} computed
 */
let currentLanguage = computed((): string => {
  return I18n.locale.value
})
/**
 * @Author: xzh
 * @Descripttion: 切换语言
 * @Param:
 */
let changeLanguage = (item: string) => {
  I18n.locale.value = item
  Dile_StoreAction.toggleLanguage(item)
}
/**
 * @Author: xzh
 * @Descripttion: 获取路由其他参数
 * @Param:
 * @param {*} query
 */
let getOtherQuery = (query: any): any => {
  return Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {} as any)
}
/**
 * @Author: xzh
 * @Descripttion:监听路由,记录路径
 * @Param:
 */
watch(
  () => routerParam.router,
  route => {
    let query = route.currentRoute.query
    routerParam.redirect = query.redirect
    routerParam.otherQuery = getOtherQuery(query)
  },
  {
    immediate: true
  }
)
/**
 * @Author: xzh
 * @Descripttion:登录
 * @Param:
 */
let loginOn = () => {
  ;(loginFormRef.value as any).validate(async (valid: boolean) => {
    if (!!valid) {
      let { loading } = toRefs(loginForm)
      try {
        loading.value = true
        let { router, redirect, otherQuery } = routerParam
        await Dile_StoreAction.login(loginForm)
        router.push({
          path: redirect || '/',
          query: otherQuery
        })
      } finally {
        loading.value = false
      }
    }
  })
}
</script>
<style lang="scss" scoped>
#login-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-content {
    width: 60rem;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 1rem;
    padding: var(--login-item-space);
    background-color: var(--login-item-bg);
    overflow: hidden;
    z-index: 10;
    gap: var(--login-item-space);
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(10px);
      z-index: -1;
    }
    .el-image {
      flex: 26vw 0 0;
    }
    .login-form {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 0;
      height: 100%;
      gap: var(--login-item-space);
      .el-text {
        font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
        font-weight: 700;
        font-size: 1.87rem;
        color: var(--login-form-title);
      }
      :deep(.el-col) {
        .el-form-item {
          margin-bottom: var(--login-item-space);
          .el-input {
            &:is(.el-input--large) {
              --el-input-height: var(--form-item-height);
            }
            .el-input__wrapper {
              height: 3rem;
              border: 0px;
              box-shadow: 0 0 1px 0 #eee;
              background-color: var(--login-item-bg);
              border-radius: 3px;
              .el-input__prefix {
                flex-basis: 8%;
                justify-content: center;
              }
              .el-input__inner {
                color: var(--el-color-success);
                caret-color: var(--el-color-success);
              }
            }
            .el-input__wrapper.is-focus {
              box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
            }
          }
          .form-verifiCode {
            display: flex;
            flex: 1;
            gap: var(--login-item-space);
            .el-input {
              flex: 1;
            }
            .form-verifiCode-content {
              flex-basis: 6.25rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid var(--el-border-color);
              background-color: var(--login-item-bg);
              span {
                font-family: 'MV Boli Normal', 'MV Boli', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 1.75rem;
                color: #464c5b;
              }
            }
          }
        }
        .el-button {
          width: 100%;
          height: var(--form-item-height);
          &:hover,
          &:focus {
            background-color: #59c993;
          }
          span {
            font-size: 1.125rem;
            font-weight: 700;
          }
        }
      }
      --form-item-height: 3.12rem;
    }

    --login-item-bg: rgba(255, 255, 255, 0.5);
    --login-item-space: 2rem;
  }
  // 适配小屏
  @media screen and (max-width: 992px) {
    .login-content {
      width: 70vw;
    }
  }
}
</style>
